<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>优鲜购管理端</title>

    <link rel="shortcut icon" href="images/icons/favicon.ico">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="bower_components/Ionicons/css/ionicons.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="dist/css/AdminLTE.min.css">
    <!-- AdminLTE Skins. We have chosen the skin-blue for this starter
          page. However, you can choose any other skin. Make sure you
          apply the skin class to the body tag so the changes take effect. -->
    <link rel="stylesheet" href="dist/css/skins/skin-blue.min.css">
    <link rel="stylesheet" href="bower_components/layer/skin/default/layer.css">
    <link rel="stylesheet" href="bower_components/ztree/css/metroStyle/metroStyle.css"/>
    <link rel="stylesheet" href="plugins/element-ui/index.css">
    <link rel="stylesheet" href="styles/common/common.css">
    <link rel="stylesheet" href="styles/index/index.css">
    <link rel="stylesheet" href="styles/icon/iconfont.css">
    <link rel="stylesheet" href="styles/page/page.css">

    <script src="js/jquery/jquery-3.4.1.min.js"></script>
    <script src="bower_components/jquery/dist/jquery.min.js"></script>
    <!-- Bootstrap 3.3.7 -->
    <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="dist/js/adminlte.min.js"></script>

    <style>
        #common-tips { /* 弹窗 */
            width: 300px;
            text-align: center;
            position: absolute;
            top: 64px;
            left: 50%;
            margin-left: -150px;
            font-size: 14px;
            height: 200px;
            overflow: hidden;
            z-index: 999;
        }

        #common-tips .common-tips-text {
            width: 298px;
            height: 28px;
            line-height: 28px;
            border: 1px solid #ffc200;
            border-radius: 5px;
            margin-bottom: 10px;
            background-color: #ffc200;
            opacity: 0.8;
            position: absolute;
            bottom: 0;
        }
        .el-scrollbar {
            height: calc(100% - 188px);
        }
        .scrollbar-wrapper {
            scrollbar-width: none; /* Firefox隐藏滚动条 */
            -ms-overflow-style: none; /* Internet Explorer 10+隐藏滚动条 */
            background-color: rgb(52, 55, 68);
        }
        .scrollbar-wrapper::-webkit-scrollbar {
            width: 0;      /* Safari,Chrome 隐藏滚动条 */
            height: 0;     /* Safari,Chrome 隐藏滚动条 */
            display: none; /* 移动端、pad 上Safari，Chrome，隐藏滚动条 */
        }
    </style>

</head>

<body>
    <div id="app" class="app">
        <div class="app-wrapper openSidebar clearfix">
            <div class="sidebar-container">
                <div class="logo">
                    <img src="images/login/login-logo.png" alt="" style="width: 118px; transition: width .2s;">
                </div>
                <div class="el-scrollbar" >
                    <div class="scrollbar-wrapper el-scrollbar__wrap" style="overflow: scroll;width: 191px;">
                        <div class="el-scrollbar__view">
                            <ul role="menubar" class="el-menu" style="background-color: rgb(52, 55, 68);">
                                <!--shiro:hasPermission="sys:user:view"-->
                                <div id="load-user-id">
                                    <li role="menuitem" tabindex="-1" class="el-menu-item"
                                        style="padding-left: 20px; color: rgb(191, 203, 217); background-color: rgb(52, 55, 68);">
                                        <i class="iconfont icon-user"></i>
                                        <span>用户管理</span>
                                    </li>
                                </div>
                                <div id="load-item-id">
                                    <li role="menuitem" tabindex="-1" class="el-menu-item"
                                        style="padding-left: 20px; color: rgb(191, 203, 217); background-color: rgb(52, 55, 68);">
                                        <i class="iconfont icon-item"></i>
                                        <span>商品管理</span>
                                    </li>
                                </div>
                                <div id="load-role-id">
                                    <li role="menuitem" tabindex="-1" class="el-menu-item"
                                        style="padding-left: 20px; color: rgb(191, 203, 217); background-color: rgb(52, 55, 68);">
                                        <i class="iconfont icon-user"></i>
                                        <span>角色管理</span>
                                    </li>
                                </div>
                                <div id="load-category-id">
                                    <li role="menuitem" tabindex="-1" class="el-menu-item"
                                        style="padding-left: 20px; color: rgb(191, 203, 217); background-color: rgb(52, 55, 68);">
                                        <i class="iconfont icon-category"></i>
                                        <span>分类管理</span>
                                    </li>
                                </div>
                                <div id="load-coupon-id">
                                    <li role="menuitem" tabindex="-1" class="el-menu-item"
                                        style="padding-left: 20px; color: rgb(191, 203, 217); background-color: rgb(52, 55, 68);">
                                        <i class="iconfont icon-coupon"></i>
                                        <span>优惠券管理</span>
                                    </li>
                                </div>
                                <div id="load-notice-id">
                                    <li role="menuitem" tabindex="-1" class="el-menu-item"
                                        style="padding-left: 20px; color: rgb(191, 203, 217); background-color: rgb(52, 55, 68);">
                                        <i class="iconfont icon-notice"></i>
                                        <span>公告管理</span>
                                    </li>
                                </div>
                                <div id="load-carousel-id">
                                    <li role="menuitem" tabindex="-1" class="el-menu-item"
                                        style="padding-left: 20px; color: rgb(191, 203, 217); background-color: rgb(52, 55, 68);">
                                        <i class="iconfont icon-carousel"></i>
                                        <span>轮播图管理</span>
                                    </li>
                                </div>
                                <div id="load-menu-id">
                                    <li role="menuitem" tabindex="-1" class="el-menu-item"
                                        style="padding-left: 20px; color: rgb(191, 203, 217); background-color: rgb(52, 55, 68);">
                                        <i class="iconfont icon-menu"></i>
                                        <span>菜单管理</span>
                                    </li>
                                </div>
                                <div id="load-log-id">
                                    <li role="menuitem" tabindex="-1" class="el-menu-item"
                                        style="padding-left: 20px; color: rgb(191, 203, 217); background-color: rgb(52, 55, 68);">
                                        <i class="iconfont icon-log"></i>
                                        <span>日志管理</span>
                                    </li>
                                </div>
                                <div id="load-order-id">
                                    <li role="menuitem" tabindex="-1" class="el-menu-item"
                                        style="padding-left: 20px; color: rgb(191, 203, 217); background-color: rgb(52, 55, 68);">
                                        <i class="iconfont icon-order"></i>
                                        <span>订单明细</span>
                                    </li>
                                </div>
                                <div id="load-information-id">
                                    <li role="menuitem" tabindex="-1" class="el-menu-item"
                                        style="padding-left: 20px; color: rgb(191, 203, 217); background-color: rgb(52, 55, 68);">
                                        <i class="iconfont icon-order"></i>
                                        <span>信息中心</span>
                                    </li>
                                </div>
                            </ul>
                        </div>
                    </div>
                    <div class="el-scrollbar__bar is-horizontal">
                        <div class="el-scrollbar__thumb" style="transform: translateX(0%);"></div>
                    </div>
                    <div class="el-scrollbar__bar is-vertical">
                        <div class="el-scrollbar__thumb" style="transform: translateY(0%);"></div>
                    </div>
                </div>
            </div>
            <div class="main-container" style="overflow:scroll">
                <div class="navbar">
                    <div class="head-lable">
                        <span>优鲜购欢迎您</span>
                    </div>
                    <div class="right-menu">
                        <div class="avatar-wrapper" id="loginUserId" th:text="${username}"></div>
                        <img src="images/icons/btn_close@2x.png" alt="退出" class="outLogin">
                    </div>
                </div>
                <div class="app-main">
                    <div class="divTmp" style="display: none;"></div>
                    <div id="cIframe" name="cIframe"></div>
                    <div class="el-loading-mask" style="display: none;">
                        <div class="el-loading-spinner">
                            <svg viewBox="25 25 50 50" class="circular">
                                <circle cx="50" cy="50" r="20" fill="none" class="path"></circle>
                            </svg>
                        </div>
                    </div>
                </div>
                <div style="width:300px;margin:0 auto; padding:20px 0;">
                    <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=43020202000155" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"><img src="images/gongan/gongan.png" style="float:left;"/><p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#939393;">湘公网安备 43020202000155号</p></a>
                </div>
            </div>
        </div>
        <!-- 弹窗提示div -->
        <div id="common-tips" style="display: none;"></div>
    </div>
    <script>
        var idUrls =[
            {
                id:"load-user-id",
                url:"user/list"
            },
            {
                id:"load-category-id",
                url:"category/list"
            },
            {
                id:"load-coupon-id",
                url:"coupon/list"
            },
            {
                id:"load-item-id",
                url:"item/list"
            },
            {
                id:"load-notice-id",
                url:"notice/list"
            },
            {
                id:"load-carousel-id",
                url:"carousel/list"
            },
            {
                id:"load-menu-id",
                url:"menu/list"
            },
            {
                id:"load-log-id",
                url:"log/list"
            },
            {
                id:"load-order-id",
                url:"order/list"
            },
            {
                id:"load-role-id",
                url:"role/list"
            },
            {
                id:"load-information-id",
                url:"information/list"
            },
        ];
        //侧边栏状态true:打开 false:关闭
        var changeSidebarState = false;
        $(function() {
            $.each(idUrls, function(key, value) {
                doPageUI(value.id,value.url);
            })
            $(".logo").click(changeSidebarContainer)
            loadLoginUsername();//加载登录用户名
        })

        //加载登录用户名
        function loadLoginUsername() {
            var url = "user/getLoginUsername";
            $.get(url,{},function (result){
                if (result.state == 1){
                    $("#loginUserId").text(result.data);
                }else {
                    $("#loginUserId").text("");
                }
            });
        }

        //侧边栏
        function changeSidebarContainer() {
            if (changeSidebarState) {
                $(this).children().width("118")
                $(".sidebar-container").width("190");
                $(".main-container").width(($(".main-container").width() - 130));
                $(".main-container").css("transition", "1s");
                changeSidebarState = false;
            } else {
                $(this).children().width("15")
                $(".sidebar-container").width("60");
                $(".main-container").width(($(".main-container").width() + 130));
                $(".main-container").css("transition", "0s");
                changeSidebarState = true;
            }
        }

        //绑定点击事件
        function doPageUI(id, url) {
            $("#"+id).click(function() {
                $("#cIframe").load(url, function() {
                    for (var i = 0; i < idUrls.length; i++) {
                        if (idUrls[i].url == url) {
                            $("#"+idUrls[i].id+" li").addClass("is-active");
                            $(".head-lable span").text($("#"+idUrls[i].id+" li span").text());

                        } else {
                            $("#"+idUrls[i].id+" li").removeClass("is-active");
                        }
                    }
                });
            })
        }
        /**
         * 弹窗提示方法
         * @param message 提示信息
         */
        function commonShowTips(message) {
            $("#common-tips").show();
            var div = "<div class='common-tips-text'>" + message + "</div>";
            $("#common-tips").append(div);
            $(".common-tips-text").animate({"bottom": "200px"}, 1500, function () {
                $(".common-tips-text").eq(0).remove();
                var tips = $("#common-tips").children();
                if (tips.length == 0) {
                    $("#common-tips").hide();
                } else {
                    $("#common-tips").show();
                }
            });
        }
    </script>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="plugins/vue/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="plugins/element-ui/index.js"></script>
    <!-- 引入axios -->
    <script src="plugins/axios/axios.min.js"></script>
    <script src="js/request/request.js"></script>
    <script src="js/validate/validate.js"></script>
    <script src="api/login/login.js"></script>
</body>
</html>